// Flex布局
@mixin flex($row: row, $align: center, $justify: center) {
  display: flex;
  flex-direction: $row;
  align-items: $align;
  justify-content: $justify;
}

// 留学申请流程
@mixin abroad($color: #E68B48) {
  padding-bottom: 94px;
  .box {
    background: #FFFFFF;
    box-shadow: 2px 1px 27px 0px rgba(174,174,174,0.39);
    border-radius: 10px;
    text-align: center;
    position: relative;
    .list {
      overflow: hidden;
      padding: 0 30px;
      box-sizing: border-box;
      .item {
        width: 25%;
        float: left;
        overflow: hidden;
        padding-top: 80px;
        @include flex(column);
        .rank {
          width: 70px;
          height: 70px;
          line-height: 70px;
          text-align: center;
          margin: auto;
          background: $color;
          border-radius: 50%;
          font-size: 28px;
          color: #fff;
          margin-bottom: 28px;
        }
        .content {
          flex: 1;
          overflow: hidden;
          font-size: 18px;
          color: #333333;
          margin: auto;
          line-height: 34px;
          text-align: left;
          max-width: 220px;
        }
      }
    }
    .el-button {
      margin-top: 80px;
      margin-bottom: 36px;
      width: 322px;
      height: 64px;
      background: $color;
      border-color: $color;
      border-radius: 10px;
      font-size: 24px;
    }
    .icon-1 {
      display: block;
      position: absolute;
      width: 225px;
      height: 185px;
      left: 0;
      bottom: 0;
      user-select: none;
    }
    .icon-2 {
      display: block;
      position: absolute;
      width: 228px;
      height: 128px;
      right: 10px;
      bottom: 0;
      user-select: none;
    }
  }
}

// bottom-form
@mixin bottom-form($bg: #e68b48, $btn-color: #FFD200, $btn-txt: #000) {
  .bottom-form {
    background-color: $bg;
    padding: 20px 50px 8px;
    border-radius: 10px;
    margin-top: 30px;
    position: relative;
    &::before {
      content: '';
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 8px solid $bg;
      position: absolute;
      bottom: 100%;
      left: 50%;
      margin-left: -6px;
    }
    .label {
      font-size: 18px;
      color: #fff;
      font-weight: bold;
    }
    .el-button {
      width: 100%;
      height: 40px;
      padding: 0;
      background: $btn-color;
      font-size: 18px;
      color: $btn-txt;
    }
  }
}

/* arrow */
@mixin arrow($width: 32, $color: #333, $angle: 45deg) {
  width: $width + px;
  height: $width + px;
  position: relative;
  &::after {
    content: '';
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    border-top: 4px solid $color;
    border-right: 4px solid $color;
    position: absolute;
    top: 44%;
    left: 0;
    transform: rotate(#{$angle}) translateY(-50%);
  }
}

/* 海外高校排名 */
@mixin schoolRank($color: #475AD9) {
  .school-rank-top {
    @include flex;
    padding-bottom: 70px;
    .item {
      flex: 1;
      position: relative;
      &:hover {
        .icon {
          transform: scale(1.1);
        }
      }
      .icon {
        display: block;
        width: 152px;
        height: 152px;
        margin: auto;
        transition: all 500ms;
      }
      .top {
        font-size: 24px;
        line-height: 52px;
        color: $color;
        text-align: center;
        font-weight: bold;
      }
      .name {
        font-size: 24px;
        color: #333333;
        text-align: center;
      }
      &::after {
        content: '';
        width: 1px;
        height: 208px;
        background: #E7E7E7;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      &:last-child {
        &::after {
          content: none;
        }
      }
    }
  }
  .country-list {
    height: 185px;
    background-color: #FAFAFA;
    width: 100%;
    @include flex;
    .item {
      margin: 0 29px;
      cursor: pointer;
      .name {
        width: 74px;
        height: 74px;
        border: 2px solid $color;
        color: $color;
        border-radius: 50%;
        margin:0 auto 16px;
        box-sizing: border-box;
        line-height: 70px;
        text-align: center;
        font-size: 20px;
        transition: all 300ms;
      }
      .english {
        font-size: 16px;
        color: #333333;
        text-align: center;
      }
      &.active {
        position: relative;
        .name {
          background-color: $color;
          color: #fff;
        }
        &::after {
          content: '';
          width: 0;
          height: 0;
          border-left: 12px solid transparent;
          border-right: 12px solid transparent;
          border-top: 16px solid $color;
          position: absolute;
          bottom: -18px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .university-list {
    height: 966px;
    background: url('../../static/image/junior/bg-2.jpg') center center no-repeat;
    background-size: 100% 100%;
    padding-top: 58px;
    box-sizing: border-box;
    margin-bottom: 82px;
    table {
      width: 100%;
      thead {
        line-height: 92px;
        font-size: 24px;
        color: #fff;
        background-color: #2637A9;
        text-align: center;
        font-weight: bold;
        .th-item {
          position: relative;
          &::after {
            content: '';
            width: 3px;
            height: 31px;
            background: #fff;
            opacity: 0.5;
            position: absolute;
            top: 30px;
            right: -1px;
          }
        }
        th:last-child {
          .th-item::before {
            content: none;
          }
        }
      }
      tbody {
        background-color: #fff;
        line-height: 71px;
        text-align: center;
        font-size: 16px;
        color: #000;
        .gray {
          background-color:#F4F4F4;
        }
      }
    }
  }
}

/* 国内、国外硕士大PK */ 
@mixin master($c1: #475AD9, $c2: #FF9600) {
  position: relative;
  .box-list {
    position: relative;
    padding-bottom: 48px;
    @include flex(row, center, center);
  }
  .box-item {
    position: relative;
    z-index: 4;
    flex: 1;
    @include flex(column,center,space-between);
    &.right {
      .top {
        margin-left: 112px;
        border-radius: 10px 10px 0px 10px;
      }
    }
  }
  .slide-1 {
    height: 490px;
    transform: translateY(50px);
  }
  .slide-2 {
    height: 941px;
  }
  .item {
    .top {
      width: 159px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      color: #fff;
      font-weight: bold;
      background: $c1;
      border-radius: 10px 10px 10px 0px;
      margin-bottom: -20px;
      position: relative;
      z-index: 5;
    }
    .content {
      width: 271px;
      height: 149px;
      background: #FFFFFF;
      box-shadow: 2px 3px 7px 0px rgba(0,54,162,0.24);
      border-radius: 10px;
      box-sizing: border-box;
      padding-top: 44px;
      padding-left: 34px;
      padding-right: 34px;
      color: #333333;
      font-size: 18px;
      line-height: 28px;
    }
    &.item-2 {
      .top {
        background-color: $c2;
      }
    }
  }
  .center-box {
    width: 769px;
    height: 759px;
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    .bg {
      display: block;
      width: 100%;
    }
    .t1 {
      font-size: 28px;
      font-weight: bold;
      color: #475AD9;
      top: 242px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .vs {
      display: block;
      width: 109px;
      height: 137px;
      top: 269px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);animation: scaleAni 1.5s infinite linear;
    }
    .t2 {
      top:392px;
      font-size: 28px;
      font-weight: bold;
      color: #FF9600;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
